<template>
  <div class="login_cat">
    <div class="layout_bg">
      <cat />
    </div>
    <div class="login_box" :style="'bottom:' + loginBoxBottom + 'px;opacity:' + loginBoxOpacity ">
      <div class="login_title">
        <h1>LET管理系统</h1>
        <h3>LET  MANAGEMENT  SYSTEM</h3>
      </div>
      <div class="login_form">
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
          <Form-item prop="userName">
            <Input type="text" v-model="formInline.userName" placeholder="用户名/账号" @on-enter="handleLogin('formInline')">
              <Icon type="ios-person-outline" slot="prepend" />
            </Input>
          </Form-item>
          <Form-item prop="password">
            <Input type="password" v-model="formInline.password" placeholder="密码" @on-enter="handleLogin('formInline')">
              <Icon type="ios-eye-off-outline" slot="prepend" />
            </Input>
          </Form-item>
          <Form-item>
            <Button @click="handleLogin('formInline')" long :loading="loading">登录</Button>
            <div class="back_password">
              <span @click="jumpPath('/backPwd')">找回密码</span>
            </div>
          </Form-item>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
  import cat from './cat.vue'
  export default {
    name: "login_cat",  // 猫
    data() {
      return {
        loginBoxBottom: -360,
        loginBoxOpacity: 0,
        fromUrl: '',
        loading: false,
        formInline: {
          userName: '',
          password: ''
        },
        ruleInline: {
          userName: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      cat
    },
    created() {
      this.getQueryUrl();
      this.login_box_show();
    },
    methods: {
      //
      login_box_show() {
        let cd = setTimeout(() => {
          this.loginBoxBottom = 280;
          this.loginBoxOpacity = 1;
          clearTimeout(cd)
        }, 500)
      },
      // 获取跳转到登录页面之前页面的路由传值
      getQueryUrl() {
        let fromUrl = this.$route.query.fromUrl;
        if(fromUrl && fromUrl !== undefined) {
          this.fromUrl = fromUrl
        }
      },
      handleLogin(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$store.dispatch('Login', this.formInline).then(res => {
              console.log(res);
              this.loading = false;
              if(res && res.status) {
                if(this.fromUrl) {
                  this.$router.push({
                    path: this.fromUrl
                  })
                }else{
                  this.$router.push({
                    path: '/'
                  })
                }
              }
            })
          } else {
            this.$Message.error('请填写正确用户名或密码!');
          }
        })
      },
      jumpPath(path) {
        let that = this;
        that.$router.push({
          path: path
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .login_cat{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    .layout_bg{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .login_box{
      width: 450px;
      height: 360px;
      background: rgba(12,12,45, 0.7);
      position: absolute;
      left: 50%;
      z-index: 10;
      transform: translate(-50%, 0);
      border-radius: 6px;
      padding: 30px 60px;
      transition: all 1s;
      /*box-shadow: 1px 1px 2px 1px #333;*/
      .login_title{
        height: 90px;
        text-align: center;
        color: #fff;
        font-family: 'corbel';
        border-bottom: 1px solid #666;
        h3{
          color: #373769;
          font-size: 15px;
          letter-spacing: 3px;
        }
      }
      .login_form{
        padding: 20px 0;
        text-align: center;
        Button{
          background: #1f1f3c;
          color: #fff;
          border: none;
        }
        Button:hover{
          background: #2B2B51;
        }
        .back_password{
          text-align: right;
          span{
            margin-right: 2px;
            margin-top: 6px;
            color: #aaa;
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 0.5px;
          }
          span:hover{
            color: #999;
          }
        }
      }
    }
  }
</style>
